<template>
  <div id="home">
    <div id="gis"></div>
    <LayerControl v-if="store.mapData.map"></LayerControl>
    <LeftNavigation v-if="store.mapData.map"></LeftNavigation>
    <MapTools v-if="store.mapData.map"></MapTools>
  </div>
</template>

<script>
import "ol/ol.css";

import LayerControl from "@/components/LayerControl.vue";
import LeftNavigation from "@/components/LeftNavigation.vue";
import MapTools from "@/components/MapTools.vue";

import { mapData, mapMethods } from "@/stores/map-store";

export default {
  name: "home",
  components: {
    LayerControl,
    LeftNavigation,
    MapTools
  },
  data() {
    return {
      store: {
        mapData,
        mapMethods
      }
    };
  },
  mounted() {
    const _this = this;
    _this.initMap();
  },
  methods: {
    initMap() {
      const _this = this;
      _this.store.mapMethods.initMap(map => {
        map.on("click", e => {
          let featureAndLayer = map.forEachFeatureAtPixel(
            e.pixel,
            (feature, layer) => {
              if (feature && layer) {
                return { feature, layer };
              }
            }
          );
          if (featureAndLayer) {
            _this.$overlay.show({
              map: map,
              feature: featureAndLayer.feature,
              editing: featureAndLayer.layer.get("editing")
            });
          }
        });
        map.on("pointerdown", () => {
          document.dispatchEvent(new CustomEvent("mousedown"));
        });
        map.on("pointerup", () => {
          document.dispatchEvent(new CustomEvent("mouseup"));
        });
        map.on("pointermove", e => {
          let pixel = map.getEventPixel(e.originalEvent);
          let hit = map.hasFeatureAtPixel(pixel);
          map.getTargetElement().style.cursor = hit ? "pointer" : "";
        });
        map.on("refreshEditableLayers", () => {
          _this.store.mapMethods.refreshEditableLayers();
        });
      });
    },
    showPopup(feature, fit) {
      const _this = this;
      _this.$overlay.show({
        map: _this.store.mapData.map,
        feature: feature,
        fit: fit
      });
    }
  }
};
</script>

<style scoped>
#home {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#gis {
  width: 100%;
  height: 100%;
}
</style>